<template>
	<!-- 收藏 -->
	<view>
		<!-- 头部 -->
		<hx-navbar ref="hxnb" :config="config" />
		<!-- 内容 -->
		<view style="background-color: #FFFFFF;padding:30rpx;">
			<view class="flex">
				<view ref="tabStyle" @click="tabber(index)" class="tabStyle" :class="taberIndex==index ? 'tabSae' :''  "
					v-for="(item,index) in taberType">{{item}} </view>
			</view>
		</view>
		<view class="content" style="margin-top:18rpx ;">
			<view class="flex" style="padding: 20rpx;margin-bottom: 5rpx;background-color: #fff;"
				v-for="(item,index) in listdate" :key="index" v-if="item.status == 1"
				@click="detail(Id,item.collectType)">
				<view>
					<view class="flex">
						<view style="width: 94rpx;height:94rpx;height:94rpx;">
							<image v-if="item.userAvatar" style="width: 94rpx;height:94rpx;border-radius: 50%;"
								:src="item.userAvatar" mode="">
							</image>
							<image v-if="item.userAvatar == null" style="width: 94rpx;height:94rpx;border-radius: 50%;"
								:src="item.image" mode="">
							</image>
						</view>
						<view style="padding: 0 30rpx;line-height: 48rpx;">
							<view style="display: flex;font-size: 32rpx;">
								{{item.name}}
							</view>
							<view
								style="font-size: 28rpx;color: #9A9898;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 348rpx;">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view v-if="item.userNick !=null" style="color: #9A9898;font-size: 28rpx;line-height: 40rpx;">
						收藏了{{item.userNick}}的作品
					</view>
					<view v-if="item.userNick ==null" style="color: #9A9898;font-size: 28rpx;line-height: 40rpx;">
						收藏了{{item.name}}的作品
					</view>
				</view>
				<image v-if="item.collectType == 1" class="image" :src="item.image" mode=""></image>
			</view>
		</view>
		<view v-if="listdate == ''" style="padding: 30rpx;margin-top: 300rpx;">
			<image src="/clientEnd/static/kong.png" style="width: 236rpx;height: 236rpx; display: block;margin: auto;"
				mode=""></image>
			<view style="text-align: center;color: rgba(30,30,30,0.3);line-height: 60rpx;">
				还没有收藏任何作品哦！
			</view>
		</view>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				collectType: 1,
				taberType: ['笔记', '产品', '工厂', '项目笔记'],
				taberIndex: 0,
				config: {
					title: '收藏',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				listdate: [],
				Id: '',
				createTime: ''
			}
		},
		onLoad() {
			this.getCollection(1, 10);
		},
		methods: {
			tabber(e) {
				this.taberIndex = e
				if (this.taberIndex == 0) {
					this.collectType = 1;
					this.getCollection(1, 10)
				} else if (this.taberIndex == 1) {
					this.collectType = 2;
					this.getCollection(1, 10)
				} else if (this.taberIndex == 2) {
					this.collectType = 3;
					this.getCollection(1, 10)
				} else {
					this.collectType = 4;
					this.getCollection(1, 10)
				}
				// console.log(this.taberIndex, '对对对')
			},
			//返回上一页
			goBack() {
				uni.navigateBack(1)
			},
			getCollection(num, size) {
				this.listdate = []
				let data = {
					pageNo: num,
					pageSize: size,
					collectType: this.collectType
				}
				this.$api.userCollect(data).then((res) => {
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
						if (item.collectType == 3) {
							this.Id = item.plantId
						} else if (item.collectType == 2) {
							this.Id = item.commodityId
						} else if (item.collectType == 4) {
							this.Id = item.projectNoteId
						} else {
							this.Id = item.articleId
						}

					})
					if (num == 1) {
						this.listdate = res.data.result.list
					} else {
						this.listdate = this.listdate.concat(res.data.result.list)
					}
					console.log('收藏', res)
					this.mescroll.endBySize(res.data.result.list.length, res.data.result.total);
					// this.listdate = res.data.result.list;
				})
			},
			detail(id, collectType) {
				if (collectType == 2) {
					this.$tools.goPageNoAuth('../plate/plateDetail?id=' + id)
				} else if (collectType == 3) {
					this.$tools.goPageNoAuth('../factor/detailIndex?id=' + id)
				} else {
					console.log('三点手打', id)
					this.$tools.goPageNoAuth('../decoration/homepageDetails?id=' + id)
				}
			}
		}
	}
</script>

<style scoped>
	.image {
		width: 214rpx;
		height: 158rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
	}
</style>
